<script setup lang="ts">
import { getGoodsOptList } from "@/api/basicArchives/goods";
import { useRouterNavigation } from "@/router/utils";
import { dealDataExcept } from "@/utils/common";
import arrowLeft from "@iconify-icons/ep/arrow-left";
import type { PaginationProps } from "@pureadmin/table";
import { onMounted, reactive, ref } from "vue";
const { go } = useRouterNavigation();

const optDesc = row => {
  let str = "";
  console.log("row", row);
  let specList = row.specList || [];
  return specList
    .map(v => {
      return `${v.specName ? v.specName : "主规格"}(${v.specCode}): ${dealDataExcept(v.buyPrice)}`;
    })
    .join(",");
};

const feeColumns: TableColumnList = [
  {
    label: "商品名称",
    width: "235",
    prop: "goodsName"
  },
  {
    label: "操作内容",
    prop: "optDesc",
    align: "left",
    cellRenderer: ({ row }) => optDesc(row)
  },
  {
    label: "操作人",
    width: "100",
    prop: "createUserName"
  }
];

function handleSizeChange(val: number) {
  searchForm.pageSize = val;
  onSearch();
}

function handleCurrentChange(val: number) {
  searchForm.pageNum = val;
  onSearch();
}

const loading = ref(false);
const optTableList = ref([]);
const searchForm = reactive({
  goodsId: "",
  pageNum: 1,
  pageSize: 10
});
const size = ref(10);
const pagination = reactive<PaginationProps>({
  total: 0,
  pageSize: 10,
  currentPage: 1,
  background: true
});

const onSearch = async () => {
  loading.value = true;
  let { data } = await getGoodsOptList(searchForm);
  optTableList.value = data.records || [];
  pagination.total = data.total;
  pagination.pageSize = data.pageSize;
  pagination.currentPage = data.currentPage;
  loading.value = false;
};

onMounted(() => {
  onSearch();
});

defineOptions({
  name: "GoodsDetail"
});
</script>

<template>
  <div class="goods-detail">
    <el-card class="w-full mb-[10px]" shadow="always">
      <div class="flex justify-between">
        <div
          class="flex items-center cursor-pointer font-bold mb-[20px]"
          @click="go(-1)"
        >
          <IconifyIconOffline :icon="arrowLeft" class="mr-2" />
          <div>商品操作日志</div>
        </div>
        <el-button type="primary" @click="onSearch">查询</el-button>
      </div>
      <div class="flex">
        <pure-table
          row-key="id"
          align-whole="center"
          :loading="loading"
          :header-cell-style="{
            background: 'var(--el-fill-color-light)',
            color: 'var(--el-text-color-primary)'
          }"
          :data="optTableList"
          :columns="feeColumns"
          :pagination="{ ...pagination }"
          show
          @page-size-change="handleSizeChange"
          @page-current-change="handleCurrentChange"
        />
      </div>
    </el-card>
  </div>
</template>
<style lang="scss" scoped>
:deep(.bd-hide .el-table--fit .el-table__inner-wrapper:before) {
  background-color: #fff;
}
:deep(.icon-no .el-table__expand-icon) {
  display: none;
}
:deep(.el-card__body) {
  padding: 15px;
}
.goods-detail {
  min-width: 1000px;
}
.el-form-item {
  margin-bottom: 5px;
}
.card-title {
  font-weight: bold;
  margin-bottom: 10px;
}
.spec-box {
  .spec-item {
    padding: 10px;
    border: 1px solid #efefef;
    border-radius: 5px;
    margin-bottom: 20px;
  }
}
.html-box {
  min-height: 400px;
  border: 1px solid #efefef;
  border-radius: 5px;
  padding: 10px;
  img {
    max-width: 100%;
  }
}
</style>
